<template>
  <div class="loginBackground">
    <form action="" class="login">
      <p>登录</p>
      <input v-model="user.userName" type="text" placeholder="用户名" />
      <input v-model="user.password" type="password" placeholder="密码" />
      <input @click="login" type="submit" class="btn denlu" value="登  录" />
      <input @click="CreateUser" type="submit" class="btn" value="创建用户" />
    </form>
    <div ref="wave" class="wave" />
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { setUser } from "@/api/index.js";
import router from "@/router/index.js";
const wave = ref(null);
onMounted(() => {
  const arr = [];
  for (let index = 0; index < 70; index++) {
    arr.push(`<div style="--d1:-${0.5 + 0.5 * index}s; --d2:-${3.5 + 0.5 * index}s;"></div>`);
  }
  wave.value.innerHTML = arr.join("");
});
const user = reactive({
  userName: "",
  password: "",
});
async function login() {
  // const res = await products();
  // console.log(res);
  router.push("/");
}
async function CreateUser() {
  const res = await setUser({ username: 1234567, password: "123456" });
  console.log(res);
}
</script>
<style lang="less" scope>
* {
  user-select: none;
  /* 无法选中，整体感更强 */
}

body {
  overflow: hidden;
}

.loginBackground {
  width: 100vw;
  height: 100vh;
  background: url(./wallpaper.jpg) no-repeat;
  background-size: cover;
  background-attachment: fixed;
  overflow: hidden;
}

.login {
  position: absolute;
  top: 50%;
  z-index: 1;
  margin-top: -200px;
  left: 50%;
  margin-left: -200px;
  /* absolute居中的一种方法 */
  background-color: whitesmoke;
  width: 400px;
  height: 400px;
  border-radius: 25px;
  text-align: center;
  padding: 5px 40px;
  box-sizing: border-box;
  /* 这样padding就不会影响大小 */
}

p {
  font-size: 42px;
  font-weight: 600;
}

input {
  background-color: whitesmoke;
  width: 100%;
  height: 48px;
  margin-bottom: 10px;
  border: none;
  border-bottom: 2px solid silver;
  /* 下面的会覆盖上面的步伐 */
  outline: none;
  font-size: 22px;
}

.btn {
  background-color: #59c2c5;
  width: 38%;
  height: 48px;
  border-radius: 8px;
  margin-top: 40px;
  font-size: 28px;
  font-weight: 600;
  color: white;
}
.btn:hover {
  background-color: #59c2a0;
}
.denlu {
  margin-right: 10px;
}

.wave {
  display: flex;
  filter: drop-shadow(120px 0 0 rgba(149, 191, 218, 0.5));
  position: absolute;
  bottom: 0;
  // z-index: 1;
}

.wave div {
  position: relative;
  width: 40px;
  height: 200px;
  margin: 0;
  border-radius: 3px;
  overflow: hidden;
}

.wave div::before {
  content: "";
  width: 300%;
  height: 100%;
  background-color: rgba(149, 191, 218, 1);
  position: absolute;
  top: -100%;
  left: 50%;
  /* // 动画名 时长 贝赛尔曲线 无限播放 来回轮流播放 */
  animation: upDown 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
  animation-delay: var(--d1), var(--d2);
}

@keyframes upDown {
  0% {
    top: 70%;
  }

  100% {
    top: 30%;
  }
}
</style>
